<template>
  <a-modal :title="title" :width="1300" :visible="visible" @cancel="handleCancel"  cancelText="关闭" okText="下一项" style="top:20px;">
    <a-spin :spinning="confirmLoading">
      <div style="display: flex;">
        <div style="margin-top:20px;width:100%"> 
          <div class="steps-content" style="margin:10px;height:600px;padding-top: 20px;"> 
            <div   style="height:600px">
              <a-row>
                <a-col :span="6" style="border: 1px dashed #d9d5d5;">
                  <a-card :bordered="false" style="width:100%"> 
                   
                    <div class="down-tree" style="height:600px;overflow-y:auto;margin-left: 20px;margin-top: 10px;">
                      <a-spin :spinning="spinning" :delay="delayTime">
                          <a-tree
                            v-if="treeData.length > 0"
                            :tree-data="treeData"
                            show-line 
                            @select="onSelect"
                            :replaceFields='replaceFields' 
                            :defaultExpandAll="autoExpandParent"
                          >   
                            <a-icon slot="switcherIcon" type="down" />
                          </a-tree>  
                      </a-spin>
                    </div> 
                  </a-card> 
                </a-col>
                
                <a-col :span="18">
                  <a-card :bordered="false" style="width:100%;" v-if="lx == '人员'">  
                        <a-row>
                          <a-col :span="8">
                            <a-form-model-item label="姓名" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="xm">
                              <a-input v-model="ryxxmodel.xm"  ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="身份证号" :labelCol="slabelCol" :wrapperCol="swrapperCol"  prop="sfzh">
                              <a-input v-model="ryxxmodel.sfzh"    ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="性别" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="xb">                               
                              <j-dict-select-tag
                                type="list"
                                v-model="ryxxmodel.xb"
                                dictCode="xb" 
                                style="width:100%"
                              />
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="出生年月" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="csny">  
                              <a-input v-model="ryxxmodel.csny"    ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="民族" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="mz">  
                              <j-dict-select-tag
                                type="list"
                                v-model="ryxxmodel.mz"
                                dictCode="mz"
                                style="width:100%"
                              />
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="联系电话" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="lxdh">
                              <a-input v-model="ryxxmodel.lxdh"   ></a-input>
                            </a-form-model-item>
                          </a-col> 
                          <a-col :span="8">
                            <a-form-model-item label="入伍时间" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="rwsj"> 
                              <a-input v-model="ryxxmodel.rwsj"    ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="退伍时间" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="twsj"> 
                              <a-input v-model="ryxxmodel.twsj"    ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="政治面貌" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="zzmm">  
                              <a-input v-model="ryxxmodel.zzmm"  ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="入党时间" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="rdsj"> 
                              <a-input v-model="ryxxmodel.rdsj"    ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          
                          <a-col :span="8">
                            <a-form-model-item label="健康状态" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="jkzt"> 
                              <a-input v-model="ryxxmodel.jkzk"  ></a-input>  
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="残疾性质" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="cjxz"> 
                              <a-input v-model="ryxxmodel.cjxz"   ></a-input>   
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-model-item label="入伍地" :labelCol="onelabelCol" :wrapperCol="onewrapperCol" prop="rwd">  
                              <a-input v-model="ryxxmodel.rwd"   ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-model-item label="拟安置地" :labelCol="onelabelCol" :wrapperCol="onewrapperCol" prop="nazd"> 
                              <j-select-depart v-model="ryxxmodel.nazd1"  placeholder="请选择拟安置地" />
                              <a-input v-model="ryxxmodel.nazd"    ></a-input>              
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="部队代号" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="bddh">
                              <a-input v-model="ryxxmodel.bddh" ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="退伍证号" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="twzh">
                              <a-input v-model="ryxxmodel.twzh"  ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="安置方式" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="azfs"> 
                              <a-input v-model="ryxxmodel.azfs"   ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="军龄" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="jl">
                              <a-input v-model="ryxxmodel.jl"  ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="入伍高校名称" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="rwgxmc">
                              <a-input v-model="ryxxmodel.rwgxmc" ></a-input>
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="8">
                            <a-form-model-item label="是否复学" :labelCol="slabelCol" :wrapperCol="swrapperCol" prop="sffx">  
                              <j-dict-select-tag
                                type="list"
                                v-model="ryxxmodel.sffx"
                                dictCode="is_open" 
                                style="width:100%"
                              />
                            </a-form-model-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-model-item label="学历情况" :labelCol="onelabelCol" :wrapperCol="onewrapperCol" prop="xlqk">   
                              <a-input v-model="ryxxmodel.xlqk"   ></a-input> 
                            
                            </a-form-model-item>
                          </a-col>
                          
                          <a-col :span="24">
                            <a-form-model-item label="奖惩信息" :labelCol="onelabelCol" :wrapperCol="onewrapperCol" prop="jlxx">   
                              <a-input v-model="model.jlxx"   ></a-input> 
                            </a-form-model-item>
                          </a-col>
                          
                        </a-row>
                  </a-card>
                  <a-card :bordered="false" style="width:100%;" v-if="lx == '目录'">
                    <a-page-header
                        :ghost="false"
                        :title="xzxx.ryxm"
                        :sub-title="xzxx.mlmc"
                        
                      > 
                        <div class="table-page-search-wrapper">
                          <a-form layout="inline" >
                            <a-row :gutter="24">
                              <a-col :xl="12" :lg="7" :md="8" :sm="24">
                                <a-form-item label="文件名称">
                                  <a-input placeholder="文件名称" v-model="wjmc" @keyup.enter.native="searchQuery"></a-input>
                                </a-form-item>
                              </a-col> 
                              <a-col :xl="12" :lg="7" :md="8" :sm="24">
                                <a-button @click="searchQuery" type="primary" icon="plus">查询</a-button>    
                             
                              </a-col>
                            </a-row>
                          </a-form>
                        </div>  
                        <div>
                      

                          <a-table
                            ref="table"
                            size="middle"
                            :scroll="{x:true}"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="ipagination"
                            :loading="loading" 
                            class="j-table-force-nowrap"
                            @change="handleTableChange">

                            <template slot="htmlSlot" slot-scope="text">
                              <div v-html="text"></div>
                            </template>
                            <template slot="imgSlot" slot-scope="text,record">
                              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                              <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
                            </template>
                            <template slot="fileSlot" slot-scope="text">
                              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                              <a-button
                                v-else
                                :ghost="true"
                                type="primary"
                                icon="download"
                                size="small"
                                @click="downloadFile(text)">
                                下载
                              </a-button>
                            </template>

                            <span slot="action" slot-scope="text, record"> 
                              <a @click="handleLook(record)">查看</a> 
                            </span>

                          </a-table>
                        </div>
                    </a-page-header> 
                  </a-card>  
                </a-col>
                
              </a-row> 
            </div>
     
    
          </div>
          
        </div>
 
      </div>
      
    </a-spin>
    <template slot="footer">
        <div >
          <a-button type="link">
            
          </a-button>
          <a-button type="white" @click="handleCancel" v-if="current < 7">关闭</a-button> 
        </div>
    </template> 
  </a-modal>
  
</template>

<script>
  import { ref } from 'vue';
  import Vue from 'vue'
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue,pushIfNotExist, filterObj  } from '@/utils/util' 
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import store from '@/store'
  import axios from 'axios' 
  import WebCamera from '@/components/webCamera/webCamera'
  import LebCamera from '@/components/lebCamera/lebCamera'
  import bdUpload from '@/components/bdUpload/bdUpload'
  import OSInfo from '@/utils/OSInfo'
  import VueViewer from 'v-viewer'
  import DaRyxxModal from '../../dary/modules/DaRyxxModal'
  // 全局配置
  VueViewer.setDefaults({
    zIndex: 9999, // 图片查看器的层级
    navbar: false, // 隐藏导航栏
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: true,
      reset: true,
      play: true,
      rotateLeft: true, 
      rotateRight: true,
      flipHorizontal: true,
      flipVertical: true,
    },
  }) 
  Vue.use(VueViewer)
  export default {
    name: 'DaJywjForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      WebCamera,
      bdUpload,
      LebCamera,
      DaRyxxModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        dictOptions:[],
        sylist:[
          {value:"复印“入伍批准书”用于研究生考试报名。",color:"#f50"},
          {value:"复印“入党志愿书”用于落组织关系。",color:"#2db7f5"},  
        ],
        // imglist:[], //介绍信
        // smglist:[], //身份证
        // tmglist:[], //退伍证
        spinning: false,
        operatingSystem: null, // 操作系统
        delayTime: 500,
        btntxt:'下一项',
        title:'',
        visible: false,
        addOrEditForm: this.$form.createForm(this),
        current: 0,
        steps: [ 
          {
            title: '填写调档信息',
            content: 'Last-content',
          },
          {
            title: '介绍信',
            content: 'Second-content',
          },
          {
            title: '调档函',
            content: 'Second-content',
          },
          {
            title: '工作人员工作证',
            content: 'Second-content',
          },
          {
            title: '工作人员身份证',
            content: 'Second-content',
          },
          {
            title: '退役士兵退伍证',
            content: 'Second-content',
          },
          {
            title: '退役士兵身份证',
            content: 'Second-content',
          },
          
          
        ],
        jsximglist:[''],
        headers: { 
          'X-Access-Token':  store.getters.token
        }, 
        model:{
        },
        onelabelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        onewrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 },
        },
        twolabelCol: {
          xs: { span: 4 },
          sm: { span: 5 },
        },
        twowrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 },
        },
        slabelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
        },
        swrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/dajy/daJyxx/add",
          edit: "/dajy/daJyxx/edit",
          userlist:"/dajy/daJyxx/dauserlist",
          // queryById: "/dajy/daJyxx/queryById",
          upload: window._CONFIG['domianURL'] +"/api/apiInfo/upload", 
          rydaml: "dary/daRyxx/ckrylist",
          queryById: "/dary/daRyxx/queryById",
          list: "/mlwj/daMlwj/list",
        },
        lx:'人员',
        data:{
          id:'',
          jyr:'',
          bjyrxm:'',
          bjyrsfzh:'',
          bjyrrwsj:'',
          bjyrtwsj:'',
          bjyrlxdh:'',
          bjyrid:'',
          dwmc:'',
          czlx:'2',
          sqyy:'',
          lx:'',
          filelist1:[],
          filelist2:[],
          filelist3:[],
          filelist4:[],
          filelist5:[],
          filelist6:[],          
          xzdawjlist:[]
        },
        fileKey:"",
        treeData:null,
        replaceFields:{
          children:'children', title:'title', key:'key' // 看你的接口返回字段是什么，对应匹配就行了
        }, 
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        checkeddata:[],
        selectedKeys: [],
        ryxm:"",
        xzxx:{
          ryxm:"",
          mlmc:"",
          ryid:"",
          mlid:"",
          id:""
        },
        ryxxmodel:{
          xm:"",
          sfzh:"",
          xb:"",
          csny:"",
          mz:"",
          lxdh:"",
          rwsj:"",
          twsj:"",
          zzmm:"",
          rdsj:"",
          jkzk:"",
          cjxz:"",
          rwd1:"",
          rwd:"",
          nazd1:"",
          nazd:"",
          bddh:"",
          twzh:"",
          azfs:"",
          jl:"",
          rwgxmc:"",
          sffx:"",
          xlqk:"",
          xlqk1:"",
          jcxx:"",
          jcxx1:"",
          mlmb:"",
        },
        selectedRowKeys: [],
        selectionRows:[],
        queryParam:[],
        dataSource:[],
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          
          {
            title:'目录名称',
            align:"center",
            dataIndex: 'mlmc'
          },
          {
            title:'文件名称',
            align:"center",
            dataIndex: 'wjmc'
          },
       
          {
            title:'顺序',
            align:"center",
            dataIndex: 'sx'
          },
          {
            title:'上传人',
            align:"center",
            dataIndex: 'createBy_dictText'
          },
          {
            title:'上传时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        wjmc:'',
        ipagination: {
          current: 1,
          pageSize: 5,
          pageSizeOptions: [ '5', '10', '15'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
          
        },
        srcList:[],
        viewheight:282,
        viewwidth:400,
        GrabLoading:false,
        hubmit:false,
        rectifying:true,//摄像头纠偏
        autocamera:false,//自动拍照
        quality:0,//图片质量
        ColorMode:0,//色彩模式
        rotatv:0,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created (id,xm) {
       //备份model原始值
      
      this.data.czlx = "1";
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      console.log(id,xm );
      this.getrylist(xm,id);
      
      this.init() 
    },
    methods: { 
      openryxx(){
        if (this.data.bjyrid == ""){
          this.$message.error("请先选择被调档人");
          return;
        }
        if (this.data.bjyrid != ""){
          let record;
          this.dictOptions.forEach(element => {
            if (element.id == this.data.bjyrid){ 
               record = element; 
            }
          });
          console.log(record);
          console.log(this.$refs.modalForm );
          this.$refs.modalForm.edit(record);
          this.$refs.modalForm.title = "详情";
          this.$refs.modalForm.disableSubmit = true; 
        } 
      },
      opendaxx(){
        if (this.data.bjyrid == ""){
          this.$message.error("请先选择被调档人");
          return;
        }
        this.$router.push({ 
          name: 'dary-DaList', // 要跳转的组件名称 
          params: {  // 路由携带参数
            'xm': this.data.bjyrxm,
            'sfzh':this.data.bjyrsfzh,
            'id':this.data.bjyrid,
            'isZhanKai':'yes',
          }
        }); 
      },
      handleInput(value){
        this.dictOptions.forEach(element => {
           if (element.id == value){ 
             this.data.bjyrxm = element.xm;
             this.data.bjyrsfzh = element.sfzh;
             this.data.bjyrrwsj = element.rwsj;
             this.data.bjyrtwsj = element.twsj;
             this.data.bjyrlxdh = element.lxdh;
             this.data.bjyrid = element.id; 
           }
        });
        console.log("选择值",this.data)
      },
      async init() {
        console.log("初始化")
        this.operatingSystem = await OSInfo.getOSInfo()
        console.log("操作系统",this.operatingSystem)
      },
      filterOption (value, option) {
        return option.componentOptions.children[0].text.indexOf(value) >= 0
      },
      OpenDeskew(){ 
        if (this.rectifying == false) { 
            this.OpenCorrect("0");
        } else { 
            this.rectifying = true;
            this.OpenCorrect("1");
        }
      }, 
      OpenCorrect(lx){
        var data = {
            "camidx": "0",  // 摄像头索引，0：主头；1：副头
            "open": lx     // 状态，0：关；1：开
        }  
        axios.post(window._CONFIG['WindowsGPYUrl']+"/dvideo=cameradeskew", JSON.stringify(data)).then((res)=>{
            
        })
      },
      rotate(angle){
        let data = {"camidx": '0', "rotate": String(angle)}
        this.rotatv+=angle;
        console.log("角度",this.rotatv)
        if (this.rotatv % 180 == 0)
        {
          this.viewheight = 282;
          this.viewwidth = 400;
        }else {
          this.viewheight = 400;
          this.viewwidth = 282;
        }
        console.log(this.viewheight)
        axios.post(window._CONFIG['WindowsGPYUrl']+"/video=rotate", JSON.stringify(data)).then((res)=>{
          
        })

      }, 
      GrabImage(){
        let jp =0;
        this.GrabLoading = true;
        let that  = this;
        if (this.rectifying==true){jp =1}

        var data = {
            "filepath": "",  //"D://test11.jpg"  指定路径  "base64" 不保存本地，返回base64  ""   保存默认路径下     
            "rotate": "0",      // 图像旋转角度，90的整数倍，默认："0"
            "deskew": jp,      // 纠偏（主头有效），参数：0:不纠偏；1:纠偏
            "deskewval": "0",       // 纠偏像素值：正常给0，正数时多裁，负数时少裁
            "camidx": 0,      // 摄像头索引，参数：0:主头；1:副头
            "quality": this.quality, //图片质量，图片保存本地调用。0:默认质量；1:高质量；2:较高质量；3:中质量；4:较低质量；5:低质量
            "ColorMode": this.ColorMode, // 色彩模式，图片保存本地时调用。0：彩色 1：灰色 2：黑白 3：白纸印章 4：去背景色(普通文件) 5:去背景色(身份证)
            "bIsPrint1to1": "0",   // 1:1打印有一点点偏差 是适用于身份证卡片之类  1:开启;  0 :关闭
        };
        var url = window._CONFIG['WindowsGPYUrl']+"/video=grabimage";
        axios.post(url, JSON.stringify(data)).then((res)=>{
          console.log("返回信息",res);
          // add_image(res.data.photoBase64) 
          // that.getUrlBase64(res.data.data.img, 'jpg', function (base64) {  
            this.GrabLoading = false;
            let data = {
                "lx": "carmera",  //数据类型 
                "value": res.data.photoBase64      // 纠偏（主头有效），参数：0:不纠偏；1:纠偏
              }
            if (this.current == '1'){  
              this.data.filelist1.push(data)
            }
            if (this.current == '2'){
              this.data.filelist2.push(data)
            }
            if (this.current == '3'){
              this.data.filelist3.push(data)
            }
            if (this.current == '4'){  
              this.data.filelist4.push(data)
            }
            if (this.current == '5'){
              this.data.filelist5.push(data)
            }
            if (this.current == '6'){
              this.data.filelist6.push(data)
            }
            // 获取设置了滚动属性的div标签
            const div = document.getElementById('container');
            // 设置滚动的顶点坐标为滚动的总高度
            div.scrollTop = div.scrollHeight + 50;
            console.log(div.scrollTop) 
          // });
          
        })
          
        

      },
      sylistClick(value){
        this.data.sqyy = value;
      },
      handleLook(record){
        this.srcList = [record.wjdz]
        this.$viewerApi({
          images: this.srcList,
        })
      },
      handleOk(){
        const that = this; 
        if (this.data.bjyrlxdh == ""){
          this.$message.error("请填写联系电话");
          return;
        } 
        if (this.data.xzdawjlist.length == 0){
          this.$message.error("请选择档案文件");
          return;
        } 
        this.confirmLoading = true;
        httpAction(this.url.add,this.data,'post').then((res)=>{ 
          if(res.code == "0"){
            this.loading = false;
            this.$emit('ok','');
            this.close(); 
          }
          }).finally(() => { 
            this.confirmLoading = false;
        })   
      },
      handlePrevious(){
        this.current--;
      },
      handleNext(){
        if (this.current == 0){
          if (this.data.bjyrxm == ""){
            this.$message.warning("请选择被调档人");
            return;
          }
          if (this.data.jyr == ""){
            this.$message.warning("请填写调档人");
            return;
          }
          if (this.data.dwmc == ""){
            this.$message.warning("请填写单位名称");
            return;
          }
        }
        if (this.current == 1 && this.data.filelist1.length == 0){
          this.$message.warning("请上传介绍信文件");
          return;
        }
        if (this.current == 2 && this.data.filelist2.length == 0){
          this.$message.warning("请上传调档函文件");
          return;
        }
        if (this.current == 3 && this.data.filelist3.length == 0){
          this.$message.warning("请上传工作人员工作证文件");
          return;
        }
        if (this.current == 4 && this.data.filelist4.length == 0){
          this.$message.warning("请上传工作人员身份证文件");
          return;
        }
        if (this.current == 5 && this.data.filelist5.length == 0){
          this.$message.warning("请上传退役士兵退伍证文件");
          return;
        }
        if (this.current == 6 && this.data.filelist6.length == 0){
          this.$message.warning("请上传退役士兵身份证文件");
          return;
        }
        // if (this.current == 1 && this.data.jyr == ""){
        //   this.$message.warning("请填写借阅人姓名");
        //   return;
        // }
        this.current++;
      },
      onContextmenu(event) {
        console.log(event.srcElement.attributes[0].value)
        let id = event.srcElement.attributes[0].value;

        this.$contextmenu({
            items: [
              {
                label: "预览(B)",
                onClick: () => { 
                  console.log("返回(B)"); 

                  const viewer = this.$el.querySelector('.hopic'+id.replace("img","")).$viewer
                  viewer.show()
                }
              },
              { 
                label: "删除(F)",
                onClick: () => { 
                  console.log("返回(B)");
                  if (this.current == '1'){this.data.filelist1.splice(id.replace("img",""),1);}
                  if (this.current == '2'){this.data.filelist2.splice(id.replace("img",""),1);}
                  if (this.current == '3'){this.data.filelist3.splice(id.replace("img",""),1);}
                }
              },   
            ],
            event,
            //x: event.clientX,
            //y: event.clientY,
            customClass: "class-a",
            zIndex: 9999,
            minWidth: 230
          });
          return false; 
      },
      allChoose(){
        
        this.selectionRows.forEach(element => {
          console.log('select',element);
          this.handleChose(element)
        });        
      },
      handleClear(){
        //清理tree选择
        this.xzxx = {
                      ryxm:"",
                      mlmc:"",
                      ryid:"",
                      mlid:"",
                      id:"",
                      sfzh:"",
                      rwsj:"",
                      twsj:"",
                      lxdh:""
                    }
        //清理选择列表
 
          this.data.id='';
          this.data.jyr='';
          this.data.bjyrxm='';
          this.data.bjyrid=''; 
          this.data.bjyrsfzh='';
          this.data.bjyrrwsj='';
          this.data.bjyrtwsj='';
          this.data.bjyrlxdh='';
          this.data.sqyy='';
          this.data.lx='';
          this.data.filelist1=[]; 
          this.data.filelist2=[];
          this.data.filelist3=[];
          this.data.filelist4=[];
          this.data.filelist5=[];
          this.data.filelist6=[];          
          this.data.xzdawjlist=[];
        
        // this.lx= "";
        console.log("获取人员列表")
        this.getrylist('');
        
      },
      handleCancel() {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      }, 
      onClearSelected(){
        this.selectedRowKeys = []
        this.selectionRows = []
      },
      searchQuery(){ 
        this.loadData();
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter);
        // param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        // param.departId = this.selectedDepIds.join(',')
        return filterObj(param);
      },
      handleTableChange(pagination, filters, sorter){
        console.log(pagination)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      loadData(){  
          let params = this.getQueryParams()//查询条件  
          this.loading = true  
          getAction(this.url.list+'?ryid='+this.xzxx.ryid+'&mlid='+this.xzxx.id+'&wjmc='+this.wjmc, params).then((res) => {
            console.log("res")
            if (res.success) {
              console.log("ok")
              this.dataSource = res.result.records;
              this.ipagination.total = res.result.total;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
            this.loading = false;
          })
          
      },
      getryxx(id){
        
        httpAction(this.url.queryById+"?id="+id,'','get').then((res)=>{ 
           console.log("返回信息",res)
           if (res.success){
            this.ryxxmodel = res.result;
           }else{
            // this.$message.error("查无该人信息");
           }
          }).finally(() => { 
        })
      }, 
      next() {
        this.current++;
      },
      prev() {
        this.current--;
      },
      onSearch(){
        this.getrylist(this.ryxm)
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onCheck(checkedKeys,e) {
        console.log('onCheck',e);
        console.log('onCheck', checkedKeys);
         
        this.checkedKeys = checkedKeys;
      },
      onSelect(selectedKeys, info){
        let level = info.selectedNodes[0].data.props.level;
        switch (level) {
          case "1":
            this.lx = '人员'; 
            this.getryxx(info.selectedNodes[0].data.props.ryid); 
            break;
          case "2":
            this.lx = '目录'; 

            this.xzxx.ryxm = info.selectedNodes[0].data.props.choose;
            this.xzxx.mlmc = info.nativeEvent.srcElement.innerText; 
            this.xzxx.ryid = info.selectedNodes[0].data.props.ryid;
            this.xzxx.mlid = info.selectedNodes[0].data.props.mlid;
            this.xzxx.id   = info.selectedNodes[0].data.props.rymlid;
            this.xzxx.sfzh   = info.selectedNodes[0].data.props.sfzh;
            this.xzxx.rwsj   = info.selectedNodes[0].data.props.rwsj;
            this.xzxx.twsj   = info.selectedNodes[0].data.props.twsj;
            this.xzxx.lxdh   = info.selectedNodes[0].data.props.lxdh;
            this.data.bjyrxm = this.xzxx.ryxm;
            this.data.bjyrsfzh = this.xzxx.sfzh;
            this.data.bjyrrwsj = this.xzxx.rwsj;
            this.data.bjyrtwsj = this.xzxx.twsj;
            this.data.bjyrlxdh = this.xzxx.lxdh;
            this.data.bjyrid = this.xzxx.ryid;
            this.loadData(); 
            console.log('目录信息',info.selectedNodes[0].data.props)
            break;        
          case "3":
            
            break;
        }
        console.log('selected', selectedKeys, info);
        // console.log('selected-code',info.selectedNodes[0].data.props.code)
      },
      expandAll() {
        this.expandedKeys = [];
        const getKeys = (treeNodes) => {
          treeNodes.forEach((node) => {
            this.expandedKeys.push(node.key);
            if (node.children) {
              getKeys(node.children);
            }
          });
        };
        getKeys(this.treeData);
        this.autoExpandParent = true;
      },
      getrylist(ryxm,id){
        let data = { ryxm : ryxm ,
                     id : id,
                     zt :""};
        this.spinning = true 
        this.treeData = []; 
        this.getryxx(id);
        httpAction(this.url.rydaml,data,'post').then((res)=>{ 
           this.treeData = res;
           this.expandAll();
           console.log("列表",this.treeData);
           
          }).finally(() => { 
            this.spinning = false;
        }) 
      }, 
      handleUpload(e){

      },
      handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
          this.data.filelist = info.fileList;
          console.log(info.file, info.fileList);
        }
        if (status === 'done') { 
          this.data.filelist = info.fileList;
          this.$message.success(`${info.file.name} 文件上传成功.`);
        } else if (status === 'error') {
          this.data.filelist = info.fileList;      
          this.$message.error(`${info.file.name} 文件上载失败.`);
        }
      },
      show(id,xm) { 
        console.log(id,xm );
        this.getrylist(xm,id);
        this.visible = true;
        this.current = 0;
        this.data.czlx = 1;
        // this.handleClear();
        // this.loadData();
        this.addOrEditForm.resetFields();
        if (this.operatingSystem == 'Windows'){
          this.$refs.WebCamera.show();
        }
        if (this.operatingSystem == 'Linux' || this.operatingSystem == 'UNIX'){
          this.$refs.LebCamera.show();
        }
        this.lx = "人员"; 
        this.getryxx(id);
        this.visible = true;
      },
      handleChose(record){  
        let push = true;
        this.data.xzdawjlist.forEach((item, index) => { 
			    if (item.id == record.id){
            console.log("重复")
            push = false;
            return;
          }
				})
        if (push){
          let data = {
            ryxm: this.xzxx.ryxm,
            mlmc: this.xzxx.mlmc,
            ryid: this.xzxx.ryid,
            mlid: this.xzxx.mlid, 
            id: record.id,
            mlmc: record.mlmc,
            wjdz: record.wjdz,
            wjmc: record.wjmc,
          }
          this.data.xzdawjlist.push(data);
        }
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        
        const that = this;
        if (this.data.filelist.length == 0){
          this.$message.error("请提交申请文件");
          return;
        }
        if (this.data.xzdawjlist.length == 0){
          this.$message.error("请选择档案文件");
          return;
        }
        httpAction(this.url.add,this.data,'post').then((res)=>{ 
          console.log(res)
          if(res.code == "0"){
            this.$emit('ok');
            this.close(); 
          }
          }).finally(() => { 
        })   
       
      },
    }
  }
</script>
<style>
  .ant-upload.ant-upload-drag{
    height:200px
  }
  .ant-card{
    height:100%
  }
  .ant-card-body{
    padding: 10px;
  }
</style>